大型店商專案一些重點步驟(數據資料取自北京尚矽谷)

(步驟和說明有很多省略 目前在複習精簡中 之後會詳細更新 先請見諒)

1開啟cmd 初始化 vue create app

2項目的其他配置
創建一個vue.config.js的文件，加入這行代碼lintOnSave:false
jsconfig.json 配置別名@ 提示【@代表的時候src檔夾，這樣將來檔過多，找的時候方便很多】

3.建立靜態頁面

4.路由配置並重寫push 與replace 方法

5.組件拆分:全域組件&路由組件

6.街口配置跨域處理 :vue.config
module.exports = {
productionSourceMap:false,
// 關閉ESLINT校驗工具
lintOnSave: false,
//配置代理跨域
devServer: {
proxy: {
"/api": {
target: "http://gmall-h5-api.atguigu.cn",
},
},
},
};

7.二次封裝axios src/api/ajax.js
請求攔截器：可以在發請求之前處理一些業務 要先與後台溝通好請求頭添加欄位( 遊客登入id  UUID)
響應攔截器：當服務器數據返回以後，可以處理一些事情

8.接口統一管理 :src/api/index.js
9.vuex倉庫管理: 主要存伺服器請求回來的資料(項目大組件多時使用)
10.路由跳轉(一) 首頁導航列跳搜尋路由xxxx/home-xxxx/search
重點1. 編程式導航+事件委派(+自定義屬性)
事件委派給導航列父節點(避免v-for時子節點會多次向伺服器發請求)
自定義屬性:
利用 :data-xxxxname=”item.xxxxname” 綁定要跳轉的子節點(可因xxxxname辨認出哪個標籤進行跳轉)
利用 :data-xxxid=”item.xxxid” 綁定子節點將之以query or paramsh參數 帶入 $route 跳轉路由時可辨認身分

        <div class="all-sort-list2" @click="goSearch">
          <div class="item" v-for=" c1 in cateGoryList" :key='c1.id'>
            <h3>
              <!-- 將a標籤綁定自定義屬性 -->
              <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}
              </a>
            </h3>
            

注意事項:search 輸入框 keyword 是否挾帶參數params 要再次加入$route中
路由跳轉 -編程式導航 ex: @click=” goSearch($event)”
goSearch(event) {
let node = event.target
let { categoryname, category1id, category2id, category3id } = node.dataset
if (categoryname) {
let loction = { name: "search" }
let query = { categoryName: categoryname }
//將query添加屬性
if (category1id) {
query.category1Id = category1id
} ….
if (this.$route.params) {
loction.query = query
loction.params = this.$route.params
}
//路由跳轉
this.$router.push(loction)
}

11.至此 search路由可取得參數放在網址內
12.跳轉到search.vue路由組件後
須先創建 data : searchParams 裏頭包含請求search伺服器介面需要帶入的參數
//建立要給伺服器的默認參數
data() {
return {
searchParams: {
//產品相應的id
category1Id: "",
…..
trademark: "",
}
}

然後 beforeMount 先將query和 params參數合併
Object.assign(this.searchParams, this.$route.query, this.$route.params)

13.mounted發請求給伺服器
this.$store.dispatch('search/getSearchList', this.searchParams)

14.而點選不同的選項 (導覽列選項or 搜尋框 keyword) 路由網址也會跟著變換
利用監聽路由的變換watch $route 也要再次合併參數和再次向伺服器發請求
15. 或是search的子組件 點選 透過自定義事件傳遞參數
從而修改search.params 並再次向伺服器發請求 (麵包屑)
16.價格排序
17.Pagination
18點擊search下的產品圖片的時候，會跳轉到該產品詳情頁Detail，同時攜帶params參數 (id)
19.跳轉後發請求(挾帶id) 伺服器 給予相應的值->存倉庫vuex->渲染頁面
20.詳情頁面商品資訊的選取 將input框裡的數據保存起來------v-model雙向綁定
skuNum用戶點擊+ 或者- 輸入框的數字進行變化 skuNum++
注意：點的時候不能小於1 當用戶在input框裡面輸入的時候注意規範性：不能為字元，不能是負數，不能是小數

21.購物商品存入購物車中( 將參數 id 和 count 購買數量 放置伺服器中 )

22.跳轉 購物車路由組件 發請求的時候，獲取不到你購物車裡的資料，因為這裡不知道購物車獲取誰的資料，
需要給使用者加一個身份！所以需要 UUID臨時遊客身份